---
title: Svelte Quickstart
sidebar_label: Svelte
description: "Add Convex to a Svelte project"
hide_table_of_contents: true
sidebar_position: 350
---

import sampleData from "!!raw-loader!@site/../private-demos/quickstarts/sveltekit/sampleData.jsonl";
import layout from "!!raw-loader!@site/../private-demos/quickstarts/sveltekit/src/routes/+layout.svelte";
import tasks from "!!raw-loader!@site/../private-demos/quickstarts/sveltekit/src/convex/tasks.ts";
import page from "!!raw-loader!@site/../private-demos/quickstarts/sveltekit/src/routes/+page.svelte";

Learn how to query data from Convex in a Svelte app.

<StepByStep>
  <Step title="Create a SvelteKit app">
    Create a SvelteKit app using the `npx sv create` command.

    Other sets of options will work with the library but for this quickstart guide:

    - For "Which Svelte app template," choose **"SvelteKit minimal."**
    - For a package manager, choose **"npm."**
    - For "Add type checking with TypeScript," choose **"Yes, using TypeScript syntax."**
    - For "Select additional options," you don't need to enable anything.

    <br></br>

    ```sh
    npx sv@latest create my-app
    ```

  </Step>

  <Step title="Install the Convex client and server library">
    To get started, install the `convex` and `convex-svelte` packages.

    ```sh
    cd my-app && npm install convex convex-svelte
    ```

  </Step>

  <Step title="Customize the convex path">
    SvelteKit doesn't like referencing code outside of source, so customize
    the convex functionsDir to be under `src/`.

    <Snippet
      source={'{\n\t\"functions\": "src/convex/\"\n}'}
      title="convex.json"
    />

  </Step>

  <Step title="Set up a Convex dev deployment">
    Next, run `npx convex dev`. This
    will prompt you to log in with GitHub,
    create a project, and save your production and deployment URLs.

    It will also create a `src/convex/` folder for you
    to write your backend API functions in. The `dev` command
    will then continue running to sync your functions
    with your dev deployment in the cloud.


    ```sh
    npx convex dev
    ```

  </Step>

  <Step title="Create sample data for your database">
    In a new terminal window, create a `sampleData.jsonl`
    file with some sample data.

    <Snippet
      source={sampleData}
      title="sampleData.jsonl"
    />

  </Step>

  <Step title="Add the sample data to your database">
    Now that your project is ready, add a `tasks` table
    with the sample data into your Convex database with
    the `import` command.

    ```
    npx convex import --table tasks sampleData.jsonl
    ```

  </Step>

  <Step title="Expose a database query">
    Add a new file <JSDialectFileName name="tasks.ts" /> in the `convex/` folder
    with a query function that loads the data.

    Exporting a query function from this file
    declares an API function named after the file
    and the export name, `api.tasks.get`.

    <Snippet
      source={tasks}
      title="src/convex/tasks.ts"
    />

  </Step>

  <Step title="Set up Convex">
    Create a new file `src/routes/+layout.svelte` and set up the Convex client there to make it available on every page of your app.

    <Snippet
      source={layout}
      title="src/routes/+layout.svelte"
    />

  </Step>

  <Step title="Display the data in your app">
    In `src/routes/+page.svelte` use `useQuery` to subscribe your `api.tasks.get`
    API function.

    <Snippet
      source={page}
      title="src/routes/+page.svelte"
      jsExtension="js"
    />

  </Step>

  <Step title="Start the app">
    Start the app, open [http://localhost:5173](http://localhost:5173) in a browser,
    and see the list of tasks.

    ```sh
    npm run dev
    ```

  </Step>

</StepByStep>

See the
[Svelte npm package documentation](https://www.npmjs.com/package/convex-svelte).
